<!-- 口岸现场查验-智能查验-货物人工查验接单-查验记录单号 -->
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" cancelText="关闭" :showOkBtn="false" :width="1200" :height="500">
    <template v-if="title == '查验记录单号'">
      <Description title="查验指令" :column="3" :data="mockData1" :schema="schema" />
      <a-alert message="总署查验要求" type="warning" show-icon style="margin: 0 0.5rem">
        <template #description>
          <div class="requirement">
            <ul>
              <li v-for="(item, index) in requirement" :key="index" :class="{ active: item.isActive }"> {{ item.name }}</li>
            </ul>
          </div>
        </template>
      </a-alert>
      <Description title="详细信息" :column="3" :data="mockData2" :schema="details" />
      <BasicTable @register="registerTable" />
      <Description title="查验集装箱" :column="3" :data="mockData3" :schema="container" />
    </template>
    <template v-else-if="title == '报关单信息'">
      <Description title="进口货物报关单" :column="3" :data="mockData1" :schema="declaration" />
    </template>
    <template v-else>
      <Description title="基础信息" :column="3" :data="mockData1" :schema="manifest" />
    </template>
    <template v-if="title == '报关单信息' || title == '舱单信息'">
      <div class="con_title"><span>详细信息</span></div>
      <div class="card-container">
        <a-tabs v-model::activeKey="activeKey" type="card">
          <a-tab-pane key="1" tab="商品信息">
            <BasicTable @register="registerTable" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="集装箱信息">
            <BasicTable @register="registerTable" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Description, DescItem } from '/@/components/Description/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { propTypes } from '/@/utils/propTypes';
  import { checkInstructionDesc, detailsDesc, detailsColumns, containerInfo, goodsDeclaration, manifestDesc } from './sendOrders.data';
  const mockData1: any = {
    num1: 'CHECKID 20190123121905 e6ff7',
    num2: '',
    num3: '310420181049928001',
    num4: 'KY0920010',
    num5: 'DJ1038/20180322',
    num6: '',
    num7: '',
    num8: '',
    num9: '水路运输',
    num10: '3104',
    num11: '前置',
    num12: '已下发',
    num13: '10B（人工一般抽查）',
    num14: '无后续处置',
    num15: '',
    num16: '',
    num17: '',
    num18: '',
    num19: '3104',
    num20: '',
    num21: '',
    num22: '',
    num23: '',
    num24: '110000000000000000000000',
    num25: '空箱',
    num26: '',
    num27: '',
    num28: '',
    num29: '',
    num30: '进口',
    num31: '',
    num32: '',
    num33: '',
    num34: '是',
    num35: '否',
    num36: '未生成',
    num37: '不辅助',
    num38: '',
  };
  const mockData2: any = {
    num1: 'CHECKID 20190107',
    num2: '货物查验表单',
    num3: '作业表单',
    num4: '指定类',
    num5: '',
    num6: '现场查验',
    num7: '',
    num8: '',
    num9: '',
    num10: '',
    num11: '',
    num12: '',
    num13: '',
    num14: '',
  };
  const mockData3: any = {
    num1: 'CHJK4646',
    num2: '50',
    num3: '0369.0789,1369.1789',
    num4: '0369.0789,1369.1789',
    num5: '',
  };
  const requirement: any = [
    {
      isActive: true,
      name: '1、辐射探测',
    },
    {
      isActive: false,
      name: '2、预防性检疫处理',
    },
    {
      isActive: true,
      name: '3、动物临床检查',
    },
    {
      isActive: false,
      name: '4、核对重量',
    },
    {
      isActive: false,
      name: '5、检查侵权',
    },
    {
      isActive: false,
      name: '6、实验室推荐方法',
    },
  ];
  const schema: DescItem[] = checkInstructionDesc;
  const details: DescItem[] = detailsDesc;
  const container: DescItem[] = containerInfo;
  const declaration: DescItem[] = goodsDeclaration;
  const manifest: DescItem[] = manifestDesc;
  const activeKey = ref('2');
  // 获取props
  defineProps({
    frameSrc: propTypes.string.def(''),
  });
  //表单赋值
  const title = ref();
  //表单赋值
  const [registerModal] = useModalInner(async (data) => {
    console.log(`output->data`, data);
    switch (data.type) {
      case 'record':
        title.value = '查验记录单号';
        break;
      case 'manifest':
        title.value = '舱单信息';
        break;
      case 'declaration':
        title.value = '报关单信息';
        break;

      default:
        break;
    }
  });

  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'user-list',
    tableProps: {
      // api: getList,
      useSearchForm: false,
      showActionColumn: false,
      showTableSetting: false,
      pagination: false,
      dataSource: [
        {
          beiyong: '123456789',
        },
      ],
      columns: detailsColumns,
    },
  });

  //注册table数据
  const [registerTable] = tableContext;

  // const [register] = useDescription({
  //   title: 'useDescription',
  //   data: mockData,
  //   schema: schema,
  // });
</script>

<style scoped lang="less">
  .detail-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 500px;
  }
  .requirement {
    width: 100%;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 20px;
        &.active {
          color: #ff7875;
          font-weight: bold;
        }
      }
    }
  }
</style>
